<template>
    <show-modal
        :title="info && info.roleId ? '角色编辑' : '新增角色'"
        :loading="loading"
        width="500px"
        @cancel="() => {$emit('cancel');}"
        @submit="submit"
    >
        <a-form-model :model="form" :rules="rules" v-bind="layout" ref="form">
            <a-form-model-item prop="roleName" label="角色名称">
                <a-input v-model.trim="form.roleName" placeholder="请输入角色名称" />
            </a-form-model-item>
            <!-- <a-form-model-item prop="roleCode" label="角色编码">
                <a-input v-model="form.roleCode" :disabled="form.roleId?true:false" placeholder="请输入角色编码" />
            </a-form-model-item> -->
            <a-form-model-item prop="menus" label="角色权限">
                <standard-tree  :routes="form.menus" @change="changeRoutes" />
            </a-form-model-item>
            <!-- <a-form-model-item label="排序" prop="roleSet">
                <a-input-number class="form_item" type="number" v-model="form.roleSet" />
            </a-form-model-item> -->
            <!-- <a-form-model-item label="状态">
                <a-switch :checked="form.status == 1 ? true : false" disabled @change="onChangeShow" />
            </a-form-model-item> -->
        </a-form-model>
    </show-modal>
</template>

<script>
import { addInfo,updateInfo } from '@/api/system/role';
import { rules } from './rules';
import standardTree from '@/components/standardTree/index';
import { mapState } from 'vuex';

export default {
    name: 'roleModel',
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    components: { standardTree },
    data() {
        return {
            rules,
            form: {
                roleName: '',
                roleSet:0,
                status:1,
                menus: []
            },
            loading: false,
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    created() {
        this.form = {...this.form, ...this.info };
    },
    methods: {
        //提交
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let form = this.form;
                        let res = null
                        if (form.roleId) {
                            //编辑
                            res = await updateInfo(form);
                        } else {
                            //新增addInfo
                            res = await addInfo(form);
                        }
                        let {code} = res;
                        if(code==200){
                            this.$message.success('操作成功!');
                            this.$emit('ok');
                        }
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.status = 1;
            } else {
                this.form.status = 0;
            }
        },
        changeRoutes(e){
            this.form.menus = e;
        },
    }
};
</script>
